
.header-nav{
    top:0;
    left:0;
    width:100%;
    height:48px;
    background:#293036;
    position: fixed;
    z-index:1000;
}
.logo{
    width:72px;
    height:48px;
    float:left;
    margin-left:30px;
}
.logo img{
    margin-top:8px;
}
.hd-nav{
    width:350px;
    height:48px;
    float:left;
    margin-left:48px;
}
.hd-nav ul li{
    float:left;
   margin-right:22px;
}
.hd-nav ul li:first-child a{
    color:#fff;
}
.hd-nav ul li img{
    margin-right:6px;
}
.hd-nav ul li a{
    line-height: 48px;
    color:#B2C0C8;
    font-size:12px;
}
.hd-nav ul li:hover{
    color:#fff;
}
.hd-right{
    margin-right:28px;
     width:400px;
     height:48px;
     float:right;
     position: relative;
}
.hd-right .free{
    float:left;
    position: relative;
    border-radius: 16px;
    color: #72c043;
    border: 1px solid #72c043;
    font-size: 12px;
    line-height: 30px;
    height: 30px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 0 12px;
    margin-top:8px;
}
.hd-right .free span{
   color:#fff;
    position:absolute;
    width:32px;
    height:18px;
    background: #FF556A;
    border-radius: 16px;
    top:-1px;
    right:-16px;
    font-size:12px;
    display: inline-block;
   line-height: 18px;
}
.hd-right .new{
    width:32px;
    height:16px;
    background: #FF556A;
    border-radius: 16px;
    position:absolute;
    top:-4px;
    right:-16px;
}

.hd-right .free:hover{
    background:#72c043;
    color:#fff;
}
.hd-right .wenhao{
    float:left;
    width:24px;
    height:24px;
   margin-top:8px;
   margin-left:20px;
}
.hd-right .create{
    float:left;
    width:108px;
    height:32px;
    margin-left:18px;
    position: relative;
    border-radius: 16px;
     color: #fff;
    background:#01ACF3;
    border: 1px solid #01ACF3;
    font-size: 12px;
    line-height: 30px;
    height: 30px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 0 12px;
    margin-top:8px;
}
.hd-right .create span{
    color:#fff;
     position:absolute;
     width:32px;
     height:18px;
     background: #FF556A;
     border-radius: 16px;
     top:-1px;
     right:-16px;
     font-size:12px;
     display: inline-block;
    line-height: 18px;
 }
 .hd-right .message{
     display: inline-block;
 }
.hd-right .message img{
    margin-top:8px;
    margin-left:30px;
   
}
.hd-right .panel{
    float:right;
    width:32px;
    height:32px;
    background:#BFC3A1;
    border-radius:50%;
    border:1px solid #DDE3E6;
    text-align:center;
    line-height:32px;
    color:#fff;
    margin-top:6px;
   margin-right:8px;
   position: relative;
}
.panel .hongbao{
    position:absolute;
    top:-10px;
    right:-8px;
}
.panel .saojiao{
    position: absolute;
    bottom:-15px;;
    right:-5px;
}
/* 专业升级部分 */
.tanchu{
    position:absolute;
    width:100%;
    height:100%;
    background:red;
    z-index:10000;
}
.upgrade{
    top:48px;
    left:center;
    width:820px;
    height:560px;
    position: absolute;
    background:rgba(0,0,0,0.8);
    padding:0 24px;
    box-sizing: border-box;
    border-radius:5px;
}
.upgrade p{
    height:88px;
    line-height:88px;
   color:#fff;
    font-size: 20px;
    font-weight: bold; 
}
.upgrade .upgrade-left p{
    line-height:44px;
    height:44px;
    border-bottom: 1px solid #DDE3E6;
}
.upgrade span{
    float: right;
    margin-right:34px;
}
.upgrade span:first-of-type{
    margin-right:28px;
}
 
.upgrade-left{
    box-sizing:border-box;
    width:466px;
    height:430px;
    background:#fff;
    float: left;
    padding:0 8px;
    border-radius:5px;
}
.upgrade-form{
  padding-top:10px;
    padding-left:36px;
  
}
.list{
    width:414px;
    height:36px;
}
.list-left{
    float:left;
    width:240px;
    line-height:36px;
    color: #7e8e98;
    font-size: 14px;
    display: flex;
}
.list-m{
    float:left;
    width:48px;
    text-align: center;
    margin-right:46px;
    line-height: 36px;
    color: #01acf3;
    font-size: 14px;
    font-weight: bold;
}
.list-r{
    float:right;
    width:48px;
    text-align: center;
    line-height: 36px;
    color: #01acf3;
    font-size: 14px;
    margin-right:32px;
    font-weight: bold;
}
.upgrade-right{
    float: right;
    width:287px;
    height:430px;
    margin-top:40px;
}
.upgrade-right .mianfei{
    height: 90px;
    margin-bottom:28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 74px;
    padding-right: 24px;
    border-radius: 5px;
    box-sizing: border-box;
    width: 100%;
    color:#fff;
    background: #72BF43;
}
.upgrade-right .mianfei h3{
    
    font-size: 14px;
    line-height: 22px;
    font-weight: bold;
}
.upgrade-right .mianfei h4{
    font-size: 18px;
    font-weight: 500;
    margin-top: 6px;
}
.upgrade-right .continue{
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    padding: 19px 40px;
    color: #7e8e98;
    font-size: 14px;
    line-height: 16px;
    background: #ffffff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
}
.upgrade-right .buy{
height:110px;
background-color: #01acf3;
}
.question{
    position: absolute;
    top:48px;
   right:130px;
    -webkit-box-shadow: 0 4px 12px rgba(6, 31, 50, 0.24);
    border-radius: 5px;
    width: 241px;
    height: 362px;
    background: white;
    display: none;
}
.question ul li{
    float: left;
    width:50%;
    height:115px;
    border-right:1px solid #F4F4F4;
    border-bottom:1px solid #F4F4F4;
    text-align: center;
}
.question li img{
    width:32px;
    height:32px;
    margin-top:30px;
}
.question li h2{
    font-size: 12px;
    margin-top:14px;
    color:#7E8E98;
}
.question ul li:nth-child(2n){
  border-right:0;
}
.question .bottom{
    border-bottom:0;
}
.container{
    margin:0 auto;
    width:1242px;
}
.sheji-hd{
    width:100%;
    height:92px;
    margin-top:48px;
    background: #293036;
    overflow: hidden;
}
.sheji_c{
height:37px;
}
.sheji-left {
    width:50%;
    float:left;
}
.sheji-left p{
    font-size:28px;
    color: #ffffff;
}
.sheji-right{
    width:50%;
    float:right;
    line-height:37px;
    text-align: right;
}

.sheji-right span{
    font-size: 14px;
    color:#B2C0C8;
   padding-left:18px;
}
body{
    background: #F4F4F4;
}
/* 内容 */
.container{
    margin:0 auto;
    width:1248px;
}
.sheji_con{
    height:100%;
    margin-top:16px;
    position: relative;
}
.con_l{
    width:50%;
    float:left;
}
.con_l input{
    width:280px;
    height:46px;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    border-radius:50px;
    padding-left:62px;
    font-size: 16px;
    color:#B2C0C8;
}
.con_l  ::-webkit-input-placeholder{
    color:#B2C0C8;
}
.con_r{
    width:50%;
    float:right;
    line-height:46px;
    text-align: right;
}
.con_r span{
    color:#7E8E98;
    padding: 0 8px;
    box-sizing: border-box;
    border-right:1px solid #ccc;
}
.con_r span:last-of-type{
    border:0;
    
}
.create{
    height:360px;
    text-align:center;
}
.create img{
    width:240px;
    height:240px;
    margin: 48px auto 24px;
    display: inline-block;

}
.create p{
    font-size: 24px;
    line-height: 2;
    font-weight: bold;
   color:#7E8E98;
}
.huishou{
    width: 70px;
    height: 70px;
    z-index: 10;
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 15px;
    background-color: rgba(126, 142, 152, 0.5);
    border-radius:5px;
    text-align: center;
}
